<template>
  <div id="content">
    <div class="form">
      <div class="demo-type">
        <el-avatar :size="150" style="margin-top: 10px">
          <img src="../../../assets/img/avatar.png" />
        </el-avatar>
      </div>
      <el-form
        status-icon
        label-width="100px"
        :model="formInline"
        class="demo-ruleForm"
      >
        <el-form-item label="邮箱">
          <el-input
            :disabled="flag"
            v-model="formInline.email"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input
            :disabled="flag"
            v-model="formInline.phoneNumber"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input
            :disabled="flag"
            v-model="formInline.username"
            type="text"
          ></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input
            :disabled="flag"
            v-model="formInline.introduction"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item class="el-form-item-button">
          <el-button class="button1" type="primary" @click="edit()" v-if="flag"
            >编辑</el-button
          >
          <el-button class="button1" type="primary" @click="save()" v-if="!flag"
            >保存</el-button
          >
          <el-button class="button2" type="primary" @click="toResetPassword()"
            >修改密码</el-button
          >
          <el-button class="button3" type="primary" @click="logout()"
            >退出登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "info",
  data() {
    return {
      content: "",
      formInline: {
        username: "admin",
        email: "1781894425@qq.com",
        phoneNumber: "18507348802",
        introduction: "恰好乌篷小小，载一肩秋色",
      },
      flag: true,
    };
  },
  methods: {
    toResetPassword() {
      this.$router.push("/resetPassword");
    },
    logout() {
      this.$router.push("/login");
    },
    edit() {
      this.flag = false;
    },
    save() {
      this.flag = true;
    },
  },
};
</script>

<style lang="less" scoped>
.demo-ruleForm {
  width: 1000px;
}
.el-form-item {
  margin-top: 50px;
  width: 500px;
  float: left;
}
.form {
  width: 1100px;
  margin-left: 200px;
}
#content {
  height: 500px;
  width: 100%;
  background-image: url("../../../assets/img/bgimg.png");
  background-repeat: no-repeat;
  background-size: 1520px 500px;
  border: 1px solid black;
  border-top: 0;
}
.formleft {
  float: left;
}
.formright {
  float: left;
}
.button1 {
  margin-left: 100px;
}
.button2 {
  margin-left: 200px;
}
.button3 {
  margin-left: 200px;
}
.el-form-item-button {
  margin-top: 10px;
  width: 1000px;
}
.demo-type {
  margin-left: 45%;
}
</style>
